<template>
    <div id="shop_footer">

        <nav class="mui-bar mui-bar-tab"  >

            <a class="mui-tab-item bottom_nav_active" id='home_tab' @tap="change_nav(k,'footer_tap')" v-for="(i,k) in nav_list" :key="k" >
                <span class="mui-icon ">
                    <div :class="!i.checked?i.icon1:i.icon2"></div>
                    <!-- <img src="../assets/images/shop_footer/a1.png" width="19px;" alt=""> -->
                </span>
                <span class="mui-tab-label" :style="i.checked?'color:#1c83fc':'color: #888888;'">{{i.name}}</span>
            </a>

        </nav>

    </div>
</template>
<script>

export default {
  name: "shop_footer",
  data() {
    return {
      nav_list: [
        {
          name: "首页",
          checked: true,
          icon1: "icon_img icon_img_a1",
          icon2: "icon_img icon_img_a2"
        },
        {
          name: "分类",
          checked: false,
          icon1: "icon_img icon_img_b1",
          icon2: "icon_img icon_img_b2"
        },
    
        {
          name: "购物车",
          checked: false,
          icon1: "icon_img icon_img_d1",
          icon2: "icon_img icon_img_d2"
        },
            {
          name: "个人中心",
          checked: false,
          icon1: "icon_img icon_img_c1",
          icon2: "icon_img icon_img_c2"
        },
      ]
    };
  },
  methods: {
    change_nav(k,type) {

      this.nav_list.forEach(e => {
        if (e.checked) {
          e.checked = false;
          return;
        }
      });
      this.nav_list[k].checked = true;

      switch (k) {
        case 0:
          this.$store.commit("change_shop_page", "home");
          break;
        case 1:
          this.$store.commit("change_shop_page", "class");
          break;
        case 2:
          this.$store.commit("change_shop_page", "car");
          break;
        case 3:
          this.$store.commit("change_shop_page", "my");
          break;
        default:
          this.$store.commit("change_shop_page", "home");
          break;
      };
      if(type){
        // 用户点击的底部菜单，这时将分类一级菜单下标改为null
        this.$store.commit("updata_class_active_index",null)
      }
    }
  },
  computed:{
    data_class_active_index(){
      return this.$store.state.goods_class.class_active_index;
    }
  },
  watch:{
    data_class_active_index(n,o){
      // n为一级菜单的下标
      // 打开分类页面即可
      if(n==null){
        // 只有用户点击底部菜单 才会将 class_active_index 改为null
        return
      }else {
        this.change_nav(1);
      }

    }
  }
};
</script>
<style lang="less" scoped>
@import "../../static/pxvalue.less";
.icon_img {
  width: @p50;
  height: @p50;
  display: inline-block;

  background-size: 100% 100%;
}
.icon_img_a1 {
  background-image: url(../assets/images/shop_footer/a1.png);
}
.icon_img_a2 {
  background-image: url(../assets/images/shop_footer/a2.png);
}

.icon_img_b1 {
  background-image: url(../assets/images/shop_footer/b1.png);
}
.icon_img_b2 {
  background-image: url(../assets/images/shop_footer/b2.png);
}

.icon_img_c1 {
  background-image: url(../assets/images/home_footer/d1.png);
}
.icon_img_c2 {
  background-image: url(../assets/images/home_footer/d2.png);
}
.icon_img_d1 {
  background-image: url(../assets/images/shop_footer/d1.png);
}
.icon_img_d2 {
  background-image: url(../assets/images/shop_footer/d2.png);
}
</style>

